<template>
	<view style="background-color: #fff; margin-top: 20rpx;">
		<view style="display: flex;justify-content: center;flex-direction: row;padding: 20rpx;align-items: center;">
			<view class="leftLine"></view>
			<text style="font-size: 22rpx; color: #333;margin: 0 20rpx;">为您推荐以下商品</text>
			<view class="rightLine"></view>
		</view>
		
		<view style="margin: 0 20rpx;">
			<mescroll-body ref="mescrollRecommend" @init="mescrollInit" @down="downCallback" @up="upCallback"
				 :up="upOption">
				<view style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;">
					<view style="width: 348rpx;background-color: #fff;margin-bottom: 20rpx;"
						v-for="(item,index) in recommendList" :key="index"
						@click="openPage('pages/product/goodsDetail', {id: item.id, type: item.type})">
						<goodsItem :goods="item"></goodsItem>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>
<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import goodsItem from "./waterfallGoodsItem.vue"
	
	import { goodsList } from '@/common/shopmall.api.js'
	export default {
		components: {
			goodsItem
		},
		mixins: [MescrollMixin],
		name:"goodsRecommend",
		data() {
			return {
				pagination: {
					auto: false,
					page: 1,
					pageSize: 20,
					total: 0,
				},
				loadStatus: 'loadmore',
				upOption: {
					auto: false,
					page: {
						size: 20 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: "没有更多数据了"
				},
				recommendList: [],
				type: 5,
			};
		},
		methods:{
			openPage(path, params) {
				this.$u.route({
					url: path,
					params
				})
			},
			getData(page) {
				let that = this;
				goodsList({
					page,
					pageSize: this.pagination.pageSize,
					type: this.type,
					recommend: 1,
				}).then(res => {
					that.mescroll.endByPage(res.data.length, res.pagination.total)
					that.pagination = res.pagination;
					if (page == 1) {
						that.recommendList = res.data
					} else {
						that.recommendList = [...that.recommendList, ...res.data]
					}
					that.pagination.page++
				})
			},
			upCallback() {
				this.getData(this.pagination.page)
			},
			downCallback() {
				this.pagination.page = 1;
				this.mescroll.resetUpScroll();
			},
		}
	}
</script>

<style lang="scss">
	.rightLine{
		height: 2rpx;
		width: 120rpx;
		background-image: linear-gradient(135deg, #333, #fff);
	}
	.leftLine{
		height: 2rpx;
		width: 120rpx;
		background-image: linear-gradient(135deg, #fff, #333);
	}
</style>
